<template>
	<div class="listDiv" v-show='showList'>
		<transition>
			<div class="alert alert-success" v-if='isSuccess' role="alert"> 加载成功! </div>
		</transition>
		<p class="title">视频列表</p>
		<div class="wrapper" ref='wrapper'>
			<div class="inWrapper">
				<ul class="videoList">
					<li ref='fileLis' v-for='(file,index) in filesList' @click='chooseVideo(index)' keys='index' title='点击切换'>{{file.name}}</li>
				</ul>
			</div>
		</div>
		<div class="addVideo">
			<input type="file" ref='files' v-show="0" @change="fileImport">
			<p class="addBtn" @click="clickFile"><span>添加视频</span></p>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default {
		name: "List",
		data() {
			return {
				filesList: [{
					name: '抖音',
					path: "/static/media/1.889b57b.mp4"
				}],
				n: 0,
				isSuccess: false,
			}
		},
		computed: {
			showList() {
				return !this.$store.state.pageExpand
			}
		},
		mounted() {
			this.n = this.filesList.length
			new BScroll(this.$refs.wrapper, {
				click: true
			})
		},
		methods: {
			mounted() {
				new BScroll(this.$refs.wrapper, {
					click: true
				})
			},
			clickFile() {
				this.$refs.files.click()
			},
			fileImport() {
				let selectedFile = this.$refs.files.files[0]
				if (!selectedFile) {
					alert('视频读取失败')
					return
				}
				this.filesList.push({
					name: selectedFile.name,
					path: window.URL.createObjectURL(selectedFile)
				})
				this.chooseVideo(this.n)
				this.isSuccess = !this.isSuccess
				setTimeout(() => {
					this.isSuccess = !this.isSuccess
				}, 1000)
				this.n++
			},
			chooseVideo(index) {
				this.$store.commit('chooseVideo', this.filesList[index].path)
			},
		}
	}
</script>

<style>
	/* 响应式 */
	@media screen and (min-width: 0px) and (max-width: 700px) {
		.listDiv {
			top: 30px;
			margin: auto;
			width: 100%;
			height: 300px;
		}

		.wrapper {
			height: 68%;
		}
	}

	@media screen and (min-width: 700px) and (min-width: 3000px) {
		.listDiv {
			float: right;
			width: 100px;
			height: 223px;
		}
	}

	@media screen and (min-width: 700px) and (max-width: 980px) {
		.listDiv {
			width: 100px;
			height: 340px;
		}

		.wrapper {
			height: 50%;
		}
	}

	@media screen and (min-width: 980px) {
		.listDiv {
			width: 150px;
			height: 452px;
		}

		.wrapper {
			height: 77%;
		}
	}

	.listDiv {
		position: relative;
		color: #fff;
		background: rgb(0, 0, 0, 0.1);
		border-radius: 5px;
		padding: 0 10px;
		text-align: center;
		overflow: hidden;
	}

	.alert {
		position: fixed;
		top: 20px;
		left: 0;
		right: 0;
		width: 200px;
		margin: auto;
	}

	.v-enter-active,
	.v-leave-active {
		transition: all .5s;
	}

	.v-enter,
	.v-leave-to {
		opacity: 0;
		top: -55px;
	}

	.wrapper {
		overflow: hidden;
	}

	.listDiv .title {
		margin-top: 5px;
		padding-bottom: 5px;
		font-size: 20px;
		border-bottom: 1px solid #fff;
	}

	.videoList li {
		list-style: none;
		height: 30px;
		font-size: 17px;
		overflow: hidden;
		line-height: 30px;
		cursor: pointer;
	}

	.videoList li:hover {
		color: #ccc;
		text-decoration: underline;
	}

	.addVideo {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 5px;
	}

	.addBtn {
		color: #fff;
		cursor: pointer;
	}

	.addBtn span {
		padding: 4px;
		border: 1px solid #fff;
		border-radius: 2px;
	}

	.addBtn span:hover {
		border: 1px solid #bbb;
		color: #ddd;
	}
</style>
